<template>
  <el-tabs v-model="store.state.filter" class="demo-tabs" @tab-click='setFilter'>
    <el-tab-pane label='all' name='all'>
      <todos></todos>
    </el-tab-pane>
    <el-tab-pane label='finished' name='finished'>
      <todos></todos>
    </el-tab-pane>
    <el-tab-pane label='unfinished' name='unfinished'>
      <todos></todos>
    </el-tab-pane>
  </el-tabs>
  <todos-form></todos-form>
</template>

<script setup>
  import { useStore } from 'vuex';
  import { ref } from 'vue';
  import TodosForm from './Form.vue';
  import Todos from './Todos.vue';

  const store = useStore();

  // const currentFilter = ref(store.state.filter);
  // const allNum = ref(store.getters.allTodos.length);
  // const finishedNum = ref(store.getters.finishedTodos.length);
  // const unfinishedNum = ref(store.getters.unfinishedTodos.length);

  const setFilter = (filter, e) => {
    // console.log(filter.props.name)
    store.commit('setFilter', filter.props.name)
    console.log(e, 'setFilter')
  }

</script>

<style lang="scss" scoped>
  
</style>